<template>
  <!-- 达人详情-粉丝分析 -->
  <div id="FansAnalysis" class="fans_analysis">

    <template v-if="vipRootObj[5][116].owner">
      <section class="fans_first-wrap">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">粉丝概览</div>
        </div>
        <!-- <div class="fans_probably">
          <div class="probably_item" v-if="TopData.gender">
            <img
              class="gender_img"
              v-if="TopData.gender.indexOf('男')==-1"
              src="@/assets/shi/girlTwo.png"
              alt
            />
            <img class="gender_img" v-else src="@/assets/shi/boy.png" alt />
            <span class="proportion_text">
              {{
              TopData.gender ? TopData.gender : "--"
              }}
            </span>
          </div>
          <div class="probably_item">
            <img src="@/assets/shi/AgeProportion.png" alt />
            <span class="proportion_text">
              {{
              TopData.age ? TopData.age : "--"
              }}
            </span>
          </div>
          <div class="probably_item">
            <img src="@/assets/shi/Dqproportion.png" alt />
            <span class="proportion_text">
              {{
              TopData.province ? TopData.province : "--"
              }}
            </span>
          </div>
        </div> -->
        <div class="fans_probably">
          <div class="proportion_item-btm" v-if="category.length!=0">
            <div class="title">偏好商品类目TOP3</div>
            <div class="label">
              <div class="label-item" v-for="(item, index) in category" :key="index">{{ item.name }}</div>
              <!-- <div class="label-item">零食食品</div>
              <div class="label-item">女装/男装</div>-->
            </div>
          </div>
          <div class="line" v-if="brand.length!=0 && category.length!=0"></div>
          <div class="proportion_item-btm" v-if="brand.length!=0">
            <div class="title">偏好商品品牌TOP3</div>
            <div class="label">
              <div class="label-item" v-for="(item, index) in brand" :key="index">{{ item.name }}</div>
              <!-- <div class="label-item">花西子</div>
              <div class="label-item">贵人鸟</div>-->
            </div>
          </div>
        </div>
      </section>
      <section class="fans_second-wrap">
        <div class="detail_second-wrap">
          <div class="second_left">
            <div class="live_top">
              <div class="line"></div>
              <div class="text">粉丝趋势</div>
            </div>
            <div class="second_left-echart">
              <KCharts
                v-if="FansTEchart.xData.length != 0 && !tuanLoading1"
                :xData="FansTEchart.xData"
                :series1="FansTEchart.yData1"
                :series2="FansTEchart.yData2"
                name1="增量"
                name2="总量"
              />
              <!-- <div class="no_data" v-if="fansDiYu.length == 0 && !tuanLoading1">
                <img src="@/assets/shi/zanwushuju.png" alt="" />
                <div>暂无数据</div>
              </div>-->
              <div
                v-loading="tuanLoading1"
                v-if="tuanLoading1"
                class="loading"
                element-loading-spinner="el-icon-loading"
              ></div>
            </div>
          </div>
          <div class="second_right">
            <div class="live_top">
              <div class="line"></div>
              <div class="text">粉丝团趋势</div>
            </div>
            <div class="second_right-echart">
              <KCharts
                v-if="FsTEchart.xData.length != 0 && !tuanLoading2"
                :xData="FsTEchart.xData"
                :series1="FsTEchart.yData1"
                :series2="FsTEchart.yData2"
                name1="增量"
                name2="总量"
              />
              <div class="no_data" v-if="FsTEchart.xData.length == 0 && !tuanLoading2">
                <img src="@/assets/shi/zanwushuju.png" alt />
                <div>暂无数据</div>
              </div>
              <div
                v-loading="tuanLoading2"
                v-if="tuanLoading2"
                class="loading"
                element-loading-spinner="el-icon-loading"
              ></div>
            </div>
          </div>
        </div>
      </section>
      <section class="fans_last-wrap">
        <div class="live_top">
          <div class="line"></div>
          <div class="text">总体粉丝画像分析</div>
        </div>
        <div class="menu_tab">
          <div class="menu_item" :class="{'menu_active': menuActive==1}" @click="menuChange(1)">账号粉丝画像</div>
          <div class="menu_item" :class="{'menu_active': menuActive==2}" @click="menuChange(2)">直播粉丝画像</div>
          <div class="menu_item" :class="{'menu_active': menuActive==3}" @click="menuChange(3)">视频粉丝画像</div>
        </div>
        <div class="detail_second-wrap" v-if="pieGenderData.length&&fansxData.length &&fansDiYu.length &&!huaLoading">
          <div class="second_left">
            <div class="portrait_text">观众性别分布</div>
            <div class="second_hua" v-if="pieGenderData && pieGenderData.length && !huaLoading">
              <GenderSpread :pieData="pieGenderData" v-if="pieGenderData && !huaLoading" />
            </div>
            <div v-if="!pieGenderData.length && !huaLoading" class="no_data" style="margin-top: 30px;">
              <img src="@/assets/shi/zanwushuju.png" alt />
              <div>暂无数据</div>
            </div>
            <!-- <div
              v-loading="huaLoading"
              v-if="huaLoading"
              class="loading"
              element-loading-spinner="el-icon-loading"
            ></div> -->
            <div class="portrait_text">观众年龄分布</div>
            <div class="second_echart">
              <BarChart
                :pieData="fansxData"
                pieName="粉丝年龄分布"
                v-if="fansxData.length && !huaLoading"
              />
              <div class="no_data" v-if="!fansxData.length &&!huaLoading">
                <img src="@/assets/shi/zanwushuju.png" alt />
                <div>暂无数据</div>
              </div>
              <!-- <div
                v-loading="huaLoading"
                v-if="huaLoading"
                class="loading"
                element-loading-spinner="el-icon-loading"
              ></div> -->
            </div>
          </div>
          <div class="second_right">
             <div class="portrait_text">粉丝地域分布</div>
            <div class="live_goods" style="margin-top: 30px">
              <div class="live_goods-roll" ref="chart2">
                <SideBarChart
                  v-if="fansDiYu.length != 0 && !huaLoading"
                  :pieData="fansDiYu"
                  pieName="粉丝地域分布"
                />
                <div class="no_data" v-if="fansDiYu.length == 0 && !huaLoading">
                  <img src="@/assets/shi/zanwushuju.png" alt />
                  <div>暂无数据</div>
                </div>
                <!-- <div
                  v-loading="huaLoading"
                  v-if="huaLoading"
                  class="loading"
                  element-loading-spinner="el-icon-loading"
                ></div> -->
              </div>
            </div>
            <!-- <div class="second_right-echart">
            <StackBarHor
              :xData="jobxData"
              :series1="jobyData01"
              :series2="jobyData02"
              :series3="jobyData03"
            />
            </div>-->
          </div>
        </div>
        <div  v-if="!pieGenderData.length&&!fansxData.length &&!fansDiYu.length &&!huaLoading" class="fans_no_data">
          <img src="@/assets/shi/zanwushuju.png" alt />
          <div v-if="menuActive==1">该用户已开启隐私设置,无法查看粉丝分析</div>
          <div v-if="menuActive==2">该达人暂未开通直播，无法查看粉丝分析</div>
          <div v-if="menuActive==3">该达人暂未发布视频，无法查看粉丝分析</div>
        </div>
         <div
            v-loading="huaLoading"
            v-if="huaLoading"
            class="loading"
            style="height: 300px"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
      </section>
    </template>
    <div class="vip_pay_box" v-else>
      <div class="vip_bg_box">
        <div class="vip_bg_mask"></div>
      </div>
      <div class="vip_box_wrap">
        <payVip routerName="FansPortrait" :lowestVipNum="vipRootObj[5][116].ownerMinLevel" />
      </div>
    </div>
  </div>
</template>

<script>
import GenderSpread from '../../../workbench/GenderSpread.vue';
import StackBarHor from '../../../workbench/stackBarHor.vue';
import SideBarChart from './SideBarChart.vue';
import KCharts from './KChart.vue';
import BarChart from './BarChart.vue';
export default {
  props: {},
  data() {
    return {
      pieGenderData: [],
      fansxData: [],
      fansDiYu: [],
      FansTEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      FsTEchart: {
        xData: [],
        yData1: [],
        yData2: []
      },
      TopData: {},
      category: [],
      brand: [],
      huaLoading: false,
      tuanLoading1: false,
      tuanLoading2: false,
      hasHeigth: 0,
      showPageVip: false,
      vipRootObj: this.$store.state.userRoot, //会员权限对象
      menuActive: 1,

      cancel01: null,
    };
  },
  components: { KCharts, GenderSpread, StackBarHor, SideBarChart, BarChart },
  computed: {},
  created() {
    if (this.vipRootObj[5][116].owner) {
      this.FansTrend();
      this.getFansPortrait();
      this.getAuthorFansOverview();
    }
  },
  mounted() {},
  watch: {},
  methods: {
    menuChange(i){
      this.menuActive = i;
      this.getFansPortrait();
      // this.getAuthorFansOverview();
    },
    // 粉丝/粉丝团  图表数据
    FansTrend() {
      this.tuanLoading1 = true;
      this.tuanLoading2 = true;
      if (Date.now()) {
        var endDate = this.timestamp(Date.now() / 1000, 'Y-M-D');
        var startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');
      }
      this.$axios
        .get('/api/Author/GetAuthorTrendThirty', {
          params: {
            authorId: this.$route.params.id,
            trendType: 1,
            star_time: startDate,
            end_time: endDate
          }
        })
        .then(res => {
          this.tuanLoading1 = false;
          if (res.data.code == 0) {
            res.data.data.dates.forEach((item, index) => {
              this.FansTEchart.xData.push(this.timestamp(item, 'M-D'));
              return this.FansTEchart.xData;
            });
            this.FansTEchart.yData1 = res.data.data.datas1;
            this.FansTEchart.yData2 = res.data.data.datas2;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.$axios
        .get('/api/Author/GetAuthorTrendThirty', {
          params: {
            authorId: this.$route.params.id,
            trendType: 2,
            star_time: startDate,
            end_time: endDate
          }
        })
        .then(res => {
          this.tuanLoading2 = false;
          if (res.data.code == 0) {
            res.data.data.dates.forEach((item, index) => {
              this.FsTEchart.xData.push(this.timestamp(item, 'M-D'));
              return this.FsTEchart.xData;
            });
            this.FsTEchart.yData1 = res.data.data.datas1;
            this.FsTEchart.yData2 = res.data.data.datas2;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // /api/author/GetFansPortrait
    getFansPortrait() {
      let that = this;
      this.huaLoading = true;
      this.$axios
        .get('/api/author/GetFansPortrait', {
          params: {
            authorId: this.$route.params.id,
            fansType: this.menuActive
          },
          cancelToken: new that.$axios.CancelToken(function executor(c) {
            if (that.cancel01) that.cancel01();
            that.cancel01 = c;
          }),
        })
        .then(res => {
          if (res.data.code == 0) {
            this.huaLoading = false;
            this.pieGenderData = res.data.data.genderRate;
            this.fansxData = res.data.data.ageRate;
            this.fansDiYu = res.data.data.provinceRate;
            // this.$nextTick(() => {
            //   let cheight = this.fansDiYu.length<3? 3 * 45 :this.fansDiYu.length * 45;
            //   if (this.$refs.chart2) {
            //     this.$refs.chart2.style.height = cheight + "px";
            //     this.hasHeigth = 1;
            //   }
            // });
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // api/Author/GetAuthorFansOverview
    getAuthorFansOverview() {
      this.$axios
        .post('/api/Author/GetAuthorFansOverview', {
          authorId: this.$route.params.id,
          // FansType: this.menuActive,
        })
        .then(res => {
          if (res.data.code == 0) {
            this.TopData = res.data.data;
            this.category = res.data.data.category;
            this.brand = res.data.data.brand;
          }
          if (res.data.code == 1003) {
            this.showPageVip = true;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped lang="less">
.fans_analysis {
  .menu_tab{
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: 20px;
    margin-bottom: 32px;
    .menu_item{
      width: 116px;
      line-height: 32px;
      font-size: 14px;
	    color: #555555;
      text-align: center;
      margin-left: 14px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      border-radius: 4px;
      box-sizing: border-box;
      
      cursor: pointer;
    }
    .menu_active{
      color: #fd7f2c;
      border: solid 1px #fd7f2c;
    }
  }
  .vip_pay_box .vip_bg_box {
    background: url('~@/assets/shi/vipLeveBgc5.png') no-repeat;
  }
  .live_top {
    display: flex;
    align-items: center;
    color: #222;
    font-weight: 600;
    .line {
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
    }
  }

  .fans_probably {
    display: flex;
    margin: 30px 0 40px;
    .probably_item {
      width: 378px;
      margin-left: 50px;
      border-right: 1px solid #efefef;
      .gender_img {
        width: 24px;
        height: 24px;
      }
    }
    .probably_item:first-child {
      margin-left: 0;
    }
    .probably_item:last-child {
      border-right: none;
    }
    .proportion_text {
      font-size: 14px;
      color: #222;
      margin-left: 10px;
    }
    .proportion_item-btm {
      width: 360px;
      margin-left: 50px;
    }
    .proportion_item-btm:first-child {
      margin-left: 0;
    }
    .line {
      width: 1px;
      height: 25px;
      background-color: #efefef;
      margin: 15px 0 15px 20px;
    }
    .title {
      font-size: 14px;
      color: #555;
    }
    .label {
      display: flex;
      margin-top: 10px;
      .label-item {
        // width: 110px;
        height: 26px;
        line-height: 26px;
        font-size: 13px;
        color: #555555;
        text-align: center;
        padding: 0 10px;
        box-sizing: border-box;
        border-radius: 4px;
        margin-right: 10px;
        background-color: #fff7ee;

        white-space: nowrap;
      }
    }
  }
  .portrait_text{
    font-size: 14px;
    color: #555555;
  }
  .detail_second-wrap {
    display: flex;
    justify-content: space-between;
    .second_left {
      width: 50%;
      .second_left-echart {
        // margin-top: 30px;
        height: 300px;
      }
    }
    .second_right {
      width: 50%;
      .second_right-echart {
        // margin-top: 30px;
        height: 300px;
      }
    }
    .no_data {
      height: 300px;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #b5b5b5;
    }
    .m_t {
      margin-top: 30px;
    }
  }
  .fans_last-wrap {
    .second_hua {
      margin-top: 30px;
      height: 60px;
      background-color: #fff;
    }
    .second_echart {
      height: 300px;
    }
    .live_goods {
      height: 390px !important;
      overflow: auto;
    }
    .live_goods-roll {
      height: 350px;
    }
  }
  .fans_no_data{
    height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #b5b5b5;
  }
}
</style>
